<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="#">去百度</a>
    <img
      src="https://pic.rmb.bdstatic.com/bjh/down/7f92b87c4893502d131ae6fe9dcce661.gif"
      alt=""
    />
    <a href="#">去必应</a>
    <a href="#">去搜狗</a>
    <a href="#" class="google">去谷歌</a>
    <script>
      // 找到符合条件的第一个元素 并返回 DOM 元素
      const a = document.querySelector("a");
      // console.log(a) // dom元素无法看到属性
      console.dir(a); // dom 元素的属性可以打印出来
      a.href = "https://www.baidu.com";

      const img = document.querySelector("img");
      setTimeout(() => {
        img.src =
          "https://p7.itc.cn/images01/20201230/56f6540084b9425788202cc8ef365308.gif";
      }, 5000);

      // 伪数组，有 length 属性，但是数组的大部分方法都用不了
      const res = document.querySelectorAll("a");
      console.log(res);
      // 可以用 forEach
      res.forEach((item) => {
        item.href = "https://www.bing.com";
      });

      // 注意：通过类选择器获取的元素，可能会出现 写属性没有提示的情况
      const googleA = document.querySelector(".google");
      googleA.href = "xxx";
    </script>
  </body>
</html>
